<script setup>
import {
  onMounted,
  nextTick,
  ref,
  reactive,
  watch,
  computed,
  watchEffect,
  toRefs,
} from "vue";
// import iconMenu from "../../assets/img/菜单白.png";
import iconMenu from "../../assets/img/menu01-img.png";
// 综合、图片、海风、海浪、海流、灾害、台风、潮汐
import iconZonghe from "../../assets/img/综合白.png";
import iconTupian from "../../assets/img/图片白.png";
import iconHaifeng from "../../assets/img/海风白.png";
import iconHailang from "../../assets/img/海浪白.png";
import iconHailiu from "../../assets/img/海流白.png";
import iconZaihai from "../../assets/img/灾害白.png";
import iconTaiFeng from "../../assets/img/台风白.png";
import iconChaoxi from "../../assets/img/潮汐白.png";
import iconSystem from "../../assets/img/管理白.png";
import iconOut from "../../assets/img/退出.png";
import iconPiaofuwu from "../../assets/img/易漂浮物.png";
import { smInfo, activeMenu } from "../../stores/chun.js";
import { useRouter } from "vue-router";
import { login, getUserPermission } from "../../network/net.js";
const router = useRouter();
const { activeShumo } = toRefs(smInfo);

let permissions = ref([]);
onMounted(() => {
  activeShumo.value = MenuKeyData.value[3];
  let token = sessionStorage.getItem("token");
  // 获取权限
  getUserPermission(token).then((res) => {

    // 根据权限渲染按钮
    permissions.value = res.data.data;
    // TODO 获取权限后按钮如果权限中包含警报则显示漂浮物预报
    // if (res.data.data.includes("alert")) {
    //   let insertIndex = MenuKeyData.value.length - 1;
    //   let newElement = {
    //     menukey: "flotage",
    //     title: "漂浮物预报",
    //     icon: iconZaihai,
    //     isShow: true,
    //   }
    // }
    // let menuSetArr = []
    // permissions.value = menuSetArr



    // console.log('res :>> ', res);
    // let permissions = res.data.data;
    // if (res.data.data.includes("system")) {

    //   let insertIndex = data.value.length - 1;
    //   let newElement = {
    //     title: "系统设置",
    //     icon: iconSystem,
    //     isShow: true,
    //   };

    //   data.value.splice(insertIndex, 0, newElement);
    // }
  });
});


const MenuKeyData = ref([
  {
    menukey: "comprehensive",
    title: "综合预报",
    icon: iconZonghe,
    isShow: true,
  },
  {
    menukey: "numerical",
    title: "数值预报",
    icon: iconTupian,
    isShow: true,
  },
  {
    menukey: "",
    title: "海风",
    icon: iconHaifeng,
    isShow: true,
    level: 2,
  },
  {
    menukey: "",
    title: "海浪",
    isShow: true,
    icon: iconHailang,
    level: 2,
  },
  {
    menukey: "",
    title: "海流",
    icon: iconHailiu,
    isShow: true,
    level: 2,
  },
  {
    menukey: "tidal",
    title: "潮位预报",
    icon: iconChaoxi,
    isShow: true,
  },
  {
    menukey: "floating",
    title: "漂浮物预报",
    icon: iconPiaofuwu,
    isShow: true,
  },
  {
    menukey: "disaster",
    title: "灾害警报",
    icon: iconZaihai,
    isShow: true,
  },

  {
    menukey: "typhoon",
    title: "台风路径",
    icon: iconTaiFeng,
    isShow: true,
  },
  {
    menukey: "system",
    title: "系统设置",
    icon: iconSystem,
    isShow: true,
  },
  {
    menukey: "",
    title: "退出系统",
    icon: iconOut,
    isShow: true,
  },
]);

// 功能按钮
const dataCom = computed(() => {
  // TODO 获取权限后按钮如果权限中包含警报则显示漂浮物预报
  // permissions.value 是否包含 "disaster-all"
  //  
  // if (permissions.value.includes("disaster-all")) {
  //   permissions.value.push("floating");
  // }

  return MenuKeyData.value.filter((item) => {
    if (item.menukey == "") return true;
    return permissions.value.includes(item.menukey);
  });
});

// const activeMenu = ref(null)
// const activeShumo = ref(data.value[3])

const handleMenu = (item) => {
  if (["海风", "海浪", "海流"].includes(item.title)) {
    if (activeShumo.value == item) {
      activeShumo.value = null;
    } else {
      activeShumo.value = item;
    }
    return;
  }
  if (item.title == "数值预报") {
    return;
  }
  // if (item.title == "进入后台") {
  if (item.title == "系统设置") {
    router.push({
      path: "/sys",
    });
    // 进入后台
    return;
  }
  if (item.title == "退出系统") {
    sessionStorage.removeItem("token");

    // 从 sessionStorage 删除所有保存的数据
    sessionStorage.clear();
    // 登录页
    router.push({
      path: "/login",
    });
    return;
  }

  if (activeMenu.value == item) {
    activeMenu.value = null;
  } else {
    activeMenu.value = item;
  }
};

const handleMenuShow = () => {
  return;
  // MenuKeyData.value = MenuKeyData.value.map((item) => {
  //   item.isShow = !item.isShow;
  //   return item;
  // });
};

const dealSty = computed(() => {
  return {
    transform: `rotateZ(${MenuKeyData.value[0].isShow ? 180 : 0}deg)`,
  };
});
</script>

<template>
  <div class="menu">
    <div class="img_menu" @click="handleMenuShow" :style="dealSty">
      <img class="img_1" :src="iconMenu" alt="" style="height: 19px; width: auto" />
    </div>
    <div v-for="item in dataCom" class="menu_item" @click="handleMenu(item)" :key="item.title" :class="[
      {
        active:
          activeMenu?.title === item?.title ||
          (item.title == '数值预报' && activeShumo?.title),
      },
      { active1: activeShumo?.title == item?.title },
    ]" v-show="item.isShow">
      <Transition name="img">
        <div style="transition: all 0.3s" v-if="item.isShow">
          <div
            :class="[item.level == 2 ? 'menu_item_img_2' : 'menu_item_img', { mini_img: item?.title == '海风' || item?.title == '海流' || item?.title == '海浪' }]">
            <img :class="item.level == 2 ? 'img_2' : 'img_1'" :src="item.icon" alt="" />
          </div>
          <div class="menu_item_title" :class="[
            {
              active:
                activeMenu?.title === item?.title ||
                (item.title == '数值预报' && activeShumo?.title),
            },
            { active1: activeShumo?.title == item?.title },
            { mini_title: item?.title == '海风' || item?.title == '海流' || item?.title == '海浪' }
          ]">
            {{ item.title }}
          </div>
        </div>
      </Transition>
    </div>
  </div>
</template>

<style lang="less" scoped>
.menu {
  position: fixed;
  right: 10px;
  top: 20px;
  z-index: 999;
  display: flex;
  flex-direction: column;
  width: 40px;
  // height: 400px;
  align-items: center;
  // background-color: #3466c5;
  border-radius: 20px;
  color: white;
  background: url("../../assets/img/menu-bg02.png") no-repeat;
  background-size: 100% 100%;

  .img_1 {
    width: 25px;
    height: 25px;
    padding: 2px;
  }

  .img_2 {
    width: 20px;
    height: 20px;
    padding: 2px;
  }

  .mini_img1 {
    width: 20px;
    height: 20px;
  }

  .img_menu {
    padding: 7px;
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
    cursor: pointer;
    // background-color: #3466c5;
    transition: all 0.3s;
    background: url("../../assets/img/menu01-bg.png") no-repeat;
    background-size: 100% 100%;
  }

  .menu_item {
    padding: 5px;
    border-radius: 50%;
    cursor: pointer;
    background-color: transparent;
    margin-bottom: 5px;
    margin-top: 5px;
    transition: background-color 0.3s;
    background-size: 100% 100%;
    border-radius: 50%;
    background: rgb(0, 115, 255);
    border: 1px solid #ffffff;
    margin: calc(12 / 1080 * 100vh) 0;
    // width: 25px;
    // height: 25px;

    // 最后一个元素的margin-bottom为0
    &:last-child {
      margin-bottom: 0;
    }

    &.active {
      // background-color: #f5a60b;
      background: url("../../assets/img/img-orange.png") no-repeat;
      background-size: 100% 100%;
    }

    &.active1 {
      // background-color: #f5a60b;
      // background-size: 100% 100%;
      // border-radius: 50%;
      // background: rgb(0, 115, 255);
      // border: 1px solid #ffffff;
      background: url("../../assets/img/img-orange.png") no-repeat;
      background-size: 100% 100%;
    }

    .menu_item_title {
      position: absolute;
      top: 50%;
      right: 50px;
      transform: translateY(-50%);
      white-space: nowrap;
      font-family: "aliph500";
      padding: 5px 10px;
      font-size: 14px;
      border-radius: 5px;
      text-shadow: 0 0 5px rgba(0, 0, 0, 0.8);
      transition: background-color 0.3s;
      display: flex;
      // justify-content: flex-end;
      justify-content: center;
      align-items: center;
      width: 75px;
      background: linear-gradient(to right,
          rgba(70, 115, 200, 0.2),
          rgb(70, 115, 200));
      height: auto;

      &.active {
        // background-color: #f5a60b;
        background: linear-gradient(to right,
            rgba(240, 90, 36, 0.3),
            rgb(240, 90, 36));
      }

      &.active1 {
        // background-color: #f5a60b;
        background: linear-gradient(to right,
            rgba(240, 90, 36, 0.3),
            rgb(240, 90, 36));
      }

      &.mini_title {
        width: 50px;
        font-size: 13px;
        // padding: 3px 5px;
        padding-top: 3px;
        padding-bottom: 3px;
      }
    }

    .menu_item_img {
      padding: 0px;
      // width: 24px;
      // text-align: center;
      // background: url('../../assets/img/img-blue.png') no-repeat;
      // background-size: 100% 100%;
      // border-radius: 50%;
      // background: rgb(0, 115, 255);
      // border: 1px solid #FFFFFF;
    }

    .menu_item_img_2 {
      padding: 0px;
      width: 24px;
      text-align: center;
      // background: url('../../assets/img/img-blue.png') no-repeat;
      // background-size: 100% 100%;
      // border-radius: 50%;
      // background: rgb(0, 115, 255);
      // border: 1px solid #FFFFFF;
    }

    .mini_img {
      width: 18px;
      height: 18px;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }

  .img-enter-from,
  .img-leave-to {
    opacity: 0;
    transform: translateX(-100px);
  }

  .v-enter-active {
    transition: opacity 0.3s ease;
  }

  .v-enter-from,
  .v-leave-to {
    opacity: 0;
  }
}
</style>
